<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>耗能占比</span>
    </div>
    <div class="text item">
      <div id="Proportion" style="width: 100%;height: 400px"></div>
    </div>
  </el-card>

</template>

<script>
import {getEmissionPercent,} from "@/api/dtct/dataCenter";

export default {
  name: "Proportion",
  mounted(){
    this.initEchart();
  },
  methods:{
   
    initEchart(){
  
    
        let myChart = this.$echarts.init(document.getElementById('Proportion'));

        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '能耗占比',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 10480, name: '生产耗电量' },
                { value: 935, name: '办公耗电量' },
                { value: 380, name: '生产耗水量' },
                { value: 184, name: '办公耗水量' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
      }


    
  }
}
</script>

<style scoped>

</style>
